<template>
  <div class="RichScan">
    <header>
      <router-link to="/"><span><i class="left"></i>首页</span></router-link>
      <span>相册</span>
    </header>
    <article>
      <div class="art_scan">
        <img src="../../static/img/scan_03.jpg">
      </div>
      <div class="art_info">
        <span>未扫描到二维码，点此反馈</span>
      </div>
    </article>
    <section>
      <div class="f_scan" v-for="info in message">
        <img v-bind:src="info.url">
        <span>{{info.text}}</span>
      </div>
    </section>
  </div>
</template>
<!--
传值：string number boolean
引用：array object
-->
<script>
  export default {
    name: 'RichScan',
    data() {
      return {
        message:[
          {
            url:"../../static/img/scan.jpg",
            text:"扫码"
          },{
            url:"../../static/img/scan_07.jpg",
            text:"AR"
          }
        ]
      }
    },
    methods: {
      //   deleteUser:function () {
      //     this.users.pop();
      //   }
      // }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body,div.RichScan,header{
    background: #000;
  }
  div.RichScan{
    width: 100%;
    color: #fff;
  }
  header{
    padding: .8rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
  }
  header a{
    color: #fff;
  }
  article{
    padding-top: 4rem;
  }
  article,div.art_info,footer{
    width: 100%;
    background: #000;
  }
  article div.art_scan{
    width: 68%;
    padding:2%;
    margin: 0 auto;
  }
  article div.art_scan img{
    width: 100%;
    height: 100%;
  }
  div.art_info{
    text-align: center;
    padding: 15% 0;
  }
  div.art_info span{
    border: 1px solid #272727;
    display: inline-block;
    padding: .8rem;
    border-radius: 15px;
    color: white;
  }
  section{
    display: flex;
    justify-content: space-around;
    padding: 1.6rem 0;
    border: none;
  }
  section div.f_scan{
    width: 30%;
    height: 15%;
    text-align: center;

  }
  section div.f_scan span{
    font-size: 1.3rem;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .f_scan img{
    width: 2rem;
    height: 2rem;
  }
  .f_scan:first-child span{
    color: #108ee9;
  }
</style>
